<template>
    <div class="post-title-box outer">
        <div class="title-box center-flex-box">
            <el-tooltip effect="dark" :content="title" placement="top">
                <div class="outer">
                    <p class="title">
                        {{title}}
                    </p>
                </div>
            </el-tooltip>
        </div>
        <div class="post-operate center-flex-box">
            <el-button type="danger" @click="deletePost" v-if="management">删帖</el-button>
            <el-button class="item" @click="collect" v-if="!collected">收藏</el-button>
            <el-button class="item" @click="removeCollect" v-else>取消收藏</el-button>
            <el-select class="item" v-model="desc" placeholder="排序点这里" @change="query">
                <el-option label="无" value="none"></el-option>
                <el-option label="回复时间" value="reply_time"></el-option>
                <el-option label="类型" value="type"></el-option>
            </el-select>
            <el-select class="item" v-model="type" placeholder="筛选点这里" @change="query">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="普通" value="0"></el-option>
                <el-option label="差评" value="1"></el-option>
                <el-option label="水评" value="2"></el-option>
                <el-option label="建议" value="3"></el-option>
                <el-option label="攻略" value="4"></el-option>
                <el-option label="神评" value="5"></el-option>
                <el-option label="吐槽" value="6"></el-option>
            </el-select>
            <el-button :type="btnType" @click="changeStatus" circle>
                <icon-font href="#ceshezhi"></icon-font>
            </el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'postTitleBar',
        data () {
            return {
                queryType: [
                    '',
                    'as_bad_review_count',
                    'as_water_count',
                    'as_suggest_count',
                    'as_strategy_count',
                    'as_god_reply_count',
                    'as_teasing_count'
                ],
                type: '',
                desc: ''
            }
        },
        props: {
            title: String,
            collected: {
                type: Boolean,
                required: false,
                default: false
            },
            management: {
                type: Boolean,
                required: true
            }
        },
        computed: {
            btnType () {
                return this.management ? 'danger' : 'success'
            }
        },
        methods: {
            query () {
                let desc = this.desc === 'none' ? '' : this.desc === 'type' ? this.queryType[this.type] : this.desc
                let type = this.type === '-1' ? '' : this.type
                this.$emit('query', { type, desc })
            },
            collect () {
                this.$emit('collect')
            },
            removeCollect () {
                this.$emit('removeCollect')
            },
            deletePost () {
                this.$emit('deletePost')
            },
            changeStatus () {
                this.$emit('changeStatus')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .center-flex-box {
        vertical-align: top;
        display: -webkit-inline-flex;
        justify-content: center;
        align-items: center;
    }

    .outer {
        display: inline-block;
        text-align: left;
        width: 100%;
    }

    .post-title-box {
        height: 80px;
        border-bottom: #b4b4b4 1px solid;
        margin: 0 0;

        .title-box {
            width: 30%;
            height: 100%;

            .title {
                font-size: 16px;
                font-weight: bolder;
                text-align: left;

                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
        }

        .post-operate {
            float: right;
            height: 100%;

            .item {
                margin: 5px;
            }
        }
    }
</style>
